<template>
  <div class="p-4">
    <GrowCard :loading="loading" :data="list" class="enter-y" />
    <SiteAnalysis class="!my-4 enter-y" :data="data" :loading="loading" />
    <!--    <div class="md:flex enter-y">-->
    <!--      <VisitRadar class="md:w-1/3 w-full" :loading="loading" />-->
    <!--      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />-->
    <!--      <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />-->
    <!--    </div>-->
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import GrowCard from '../components/GrowCard.vue';
  import SiteAnalysis from '../components/SiteAnalysis.vue';
  import VisitSource from '../components/VisitSource.vue';
  import VisitRadar from '../components/VisitRadar.vue';
  import SalesProductPie from '../components/SalesProductPie.vue';
  import { defHttp } from '@/utils/http/axios';
  import { growCardList } from '@/views/dashboard/Analysis/data';

  const loading = ref(true);
  const data = ref({});
  const list = reactive([...growCardList]);
  defHttp.get({ url: '/dashboard/analysis/data' }).then((response) => {
    console.log(response);
    data.value = response;
    setGrowData(response);
  });

  // 上边四个数据
  function setGrowData(data) {
    list[0].title = '基地数';
    list[0].value = data.baseTotalNum;

    list[1].title = '地块数';
    list[1].value = data.plotTotalNum;

    list[2].title = '农产品数';
    list[2].value = data.productTotalNum;

    list[3].title = '投入品数量';
    list[3].value = data.inputTotalNum;
  }
  setTimeout(() => {
    loading.value = false;
  }, 500);
</script>
